<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content">
                <!-- <view class="popup-main"> -->
                <view style="display: flex; justify-content: space-between;">
                    <view class="popupTitle"> 温馨提示</view>
                    <van-icon name="cross"  size="15" @click="closePopup" />
                </view>
                <view class="cancelPopup-wrapper ">
                    <view class="popupTips">{{cancelPopupRemark}}</view>
                    <!-- 你确认取消本次预约吗，如多次取消可能会影响您的信用记录，将会影响您后续的预约服务 -->
                    <!-- <view class="popupTips">免责取消：如取消本次预约将会扣除平台赠送的N次免责次数</view>
                    <view class="popupTips">违约取消：您取消预约的次数已达到平台赠送的免责次数，如取消平台将根据规则收费相应违约金</view> -->
                </view>


                <view class="bottom_btn">
                    <van-button type="primary" @click="onCancelOrder" id="submitButton" :disabled="isSubmitting"
                    :class="{ 'disabled-btn': isSubmitting }">确认取消</van-button>

                    <!-- <van-button type="primary" v-if="!checked" @click="gouxuan" id="button">确认取消</van-button>
                    <van-button type="primary" @click="onCancelOrder" v-else id="submitButton">确认取消</van-button> -->
                </view>
                <!-- <view class="agreement" @click="onChange">
                    <van-checkbox style="width: 34rpx" icon-size="12px" :value="checked" @change="onChange"
                        :label-disabled="true" use-icon-slot>
                        <image @click="onChange" slot="icon" class="checked-img"
                            :src="checked ? activeIcon : inactiveIcon" />
                    </van-checkbox>
                    <view style="margin-left: 18rpx;">阅读并同意</view>
                    <view class="href" id="secrectAgreement">《取消服务预约协议》，</view>
                    <view>取消服务预约</view>
                </view> -->
                <van-toast id="van-toast" />
            </view>
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import { cancelServiceApi} from '@/api/service'
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        cancelPopupRemark: {
            type: String,
            default: () => ''
        },
        cancelBookedInfo:{
            type:Object,
            default:()=>{}
        }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            title: '取消订单',
            option: {},
            url: '',
            stepperValue:1,
            popupData:[

                {
                    key:1,
                    text:'价格有点贵'
                },
                {   
                    key:2,
                    text:'规格/款式/数量拍错'
                },
                {
                    key:3,
                    text:'说活地址拍错'
                },
                {
                    key:4,
                    text:'暂时不需要了'
                },
                {
                    key:5,
                    text:'其他'
                },
            ],
            popupHeight:'500',

            isCancel:true,
            checked: false,
                inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
                activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',    
            isSubmitting: false,
            submitTimer: null   

        }
    },

    computed: {
    },


  watch:{
    show: {
        immediate: true, // 这句重要
        handler(v) {
            console.log(v, 'v')
        },
        deep: true
      }
  },
    onLoad () { },
    onReady () {},

    methods: {
       
        // 关闭弹窗
        closePopup () {
            this.isCancel=false
            this.$emit('closeCancelPopup',this.isCancel)
        },

        // 暂不取消
        notCancel(){
            this.isCancel=false
            this.$emit('closeCancelPopup',this.isCancel)

        },
        //未勾选须知前的按钮  弹出提示
        gouxuan () {
            if (!this.checked) {
                Toast('请先勾选《取消预约服务须知》')
                return false
            }
        },
        // 报名须知
        onChange (e) {
            if (e.target.id !== 'secrectAgreement') {
                this.checked = !this.checked
            }
        },
        // 确定取消
        onCancelOrder() {
            if (this.isSubmitting) return;
            this.isSubmitting = true;
            clearTimeout(this.submitTimer);

            this.submitTimer = setTimeout(async () => {
                try {
                    const res = await cancelServiceApi(this.cancelBookedInfo);
                    console.log(res)
                    if (res.code === 200) {
                        Toast('取消成功')
                        this.isCancel = true
                        this.closePopup()
                        uni.redirectTo({
                            url: '/pages/myService/otherStatusService?params=' +
                                encodeURIComponent(JSON.stringify(this.cancelBookedInfo))
                        })
                    }
                } catch (error) {
                    console.error('取消失败:', error);
                    Toast('取消失败，请重试');
                } finally {
                    this.isSubmitting = false;
                    clearTimeout(this.submitTimer);
                }
            }, 500); // 500ms防抖间隔

        },

  },

}
</script>
<style lang="scss" scoped>

// 提示框
.popup-content {
    padding: 24px;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    height: 50%;


    // .popup-main {
    //     height: 100%;
    // }


    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }


    .cancelPopup-wrapper {
        padding-top: 70rpx;
    }

    .popupTips{
        font-size: 28rpx;
        text-align: left;
        color: #111111;
    }

}
.bottom_btn{
    margin-top: 54rpx;
    margin-bottom: 54rpx;
}
.agreement {
    // height: 44px;
    font-size: 24rpx;
    color: #111111;
    display: flex;
    align-items: flex-start;
}
::v-deep .van-button--info {
    width: 100%;
    height: 86rpx;
    border-radius: 8px;
    background: #1F6AFF;
}
::v-deep .van-button--primary {
    width: 100% !important;
    height: 86rpx;
    font-size: 28rpx;
    border-radius:50rpx;
    // background: #FF6203 !important;
    // border: 1px solid #ff6203 !important;
}

::v-deep .van-count-down {
    display: inline;
    font-size: 14px;
    color: #98C4FF;
}

.href {
    color: #ff6203;
}
/* ::v-deep .van-checkbox{
      width: 12px;
  } */

.gray {
    color: gray;
}
::v-deep .van-button__text {
    // font-family: "PingFang SC";
    // font-style: normal;
    font-weight: bold;
    font-size: 16px;
}
.password {
    margin: 24px 0 12px;
}
.checked-img {
    height: 12px;
    width: 12px;
    margin-top: 4px;
}
button::after{
    border: none;
}
.button-hover{
    background-color: transparent;
}
.no-login{
    font-size: 24rpx;
    margin-bottom: calc(81rpx + env(safe-area-inset-bottom));
    line-height: 24rpx;
    color: #757980;
    text-align: center;
    margin-top: 75rpx;
}

.image{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    width: 124rpx;
    height: 124rpx;
    img{
        width: 100%;
        height: auto;
    }
}
.middle{
    height: 80rpx;
}
.disabled-btn {
    // background-color: #cccccc !important;
    border-color: #cccccc !important;
}
.bottom_b{
    margin-top: 52rpx;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>

